<template>
	<view class="container">
		<view class="status_bar">
			<view style="margin-left: 4%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></view>
			<view style="margin-left: -50upx; font-weight: bold;">会员中心</view>
			<view style="margin-right: 28upx;">
				<!-- <u-icon name="clock" size='28' /> -->
			</view>

			</u-icon>
		</view>
		<!--头部-->
		<view class="vip-box">
			<view style="border-radius: 30upx;margin-left: 10upx;" v-if="urlList">
				<!-- <u--image :showLoading="true" :src="urlList" width="110upx" height="130upx" @click="click"
					radius="10upx"></u--image> -->
			</view>
			<view v-else class="name-img">多</view>
			<view>
				<view style="color: #855b29;font-weight: 500;"></view>
				<view style="color: #9d6c32;font-weight: 300;margin-top: 10upx;">开通VIP会员，尊享会员权益</view>
			</view>
		</view>
		<view class="shop-box">
			<view class="con-shop" @tap="toPage('/pages/mine/account/phoneUpdate')">
				<view style="font-weight: bold;"><span style="color: #066af3;">|</span>开通会员</view>
			</view>
			<view :class="index==activeIndex?'con-shop-item-active':' con-shop-item'" v-for="(item, index) in vipList"
				:key="index" @tap="handleShop(index,item)">
				<view>{{item.product_name}}</view>
				<view><span :class="index==activeIndex?'num-box-active':'num-box'">{{item.price}}</span>XOS币</view>
				<view class="btn-box" @tap="handleBuy(item)">立即开通</u-button></view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId') || '',
				user: {},
				nickname: '',
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				showSex: false,
				columns: [
					[{
						label: '男',
						id: 2021
					}, {
						label: '女',
						id: 804
					}]
				],
				showDate: false,
				activeIndex: -1,
				urlList: '../../../static/img/face.png',
				vipList: [{
						title: "月VIP（青铜）",
						num: 96
					},
					{
						title: "半年VIP （白银）",
						num: 567
					},
					{
						title: "年VIP （黄金）",
						num: 1077
					}
				],
				product_id: ''
			}
		},
		onLoad() {
			//this.getBuy()
		},
		onShow() {
			this.getList()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleShop(index, item) {
				console.log(item)
				this.activeIndex = index
				this.product_id = item.product_id
			},
			logout() {
				
				// uni.clearStorageSync()
				uni.MBSocketProvider.closeLocalSocket();
				uni.setStorageSync('loginInfo', {});
				uni.setStorageSync('token', '')
				uni.setStorageSync('user_uid', '')
				uni.setStorageSync('userId', '')
				uni.setStorageSync('user_level', '')
				uni.setStorageSync('nickname', '')
				uni.setStorageSync('user_avatar_file_name', '')
				uni.setStorageSync('loginInfoArr', []);
				this.toPage('/pages/login')
			},
			getList() {
				uni.request({
					url: this.$api.baseUrl + '/api/common/product/fetch',
					header: {
						'content-type': 'application/json'
					},
					data: {
						product_category: 1,
						//user_id: uni.getStorageSync('user_uid'),
					},
					method: 'POST',
					success: res => {
						console.log(res, 111);
						this.vipList = res.data.data

					},
					fail: res => {
						console.log(res);
					}

				})
			},
			handleBuy(item) {
				console.log(item)
				uni.showModal({
					title: '提示',
					content: '确定购买会员?',
					success: res => {
						this.toPage('/pages/discover/money/pay?summoney=' + item.price + '&ordernum=' +
							item.product_id);
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	background-color: #999;
	// }
	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;

		.face {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		.info-name {
			font-size: 40upx;
			font-weight: bold;
		}

		.info-num {
			// width: 56upx;
			padding: 2upx 30upx;
			background: #f0f4f7;
			border-radius: 30upx;
			margin-top: 21upx;
		}

		.copybtns {
			color: #4457a4;
			margin-top: 21upx;
		}
	}

	.shop-box {
		width: 92%;
		margin-left: 4%;
		background-color: #fff;
		margin-top: 20upx;
		border-radius: 20upx;
		padding: 10upx 30upx;
		box-shadow: 0 0 40upx #d6e7f1; // 左
		box-shadow: 0 0 40upx #d6e7f1; // 右
		color: #2e2e2e;
		font-weight: 300;

		image {
			width: 70upx;
			height: 70upx;
			padding: 10upx 28upx 0upx 10upx;

		}

	}

	.vip-box {
		width: 92%;
		height: 180upx;
		margin-left: 4%;
		margin-top: 10upx;
		border-radius: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: url(../../../static/image/vip-bg@3x.png) no-repeat;
		background-size: 100%;
		padding: 40upx;

		.name-img {
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
			background: #d54827;
			font-size: 36upx;
			text-align: center;
			line-height: 110upx;
			color: #fff;
			margin-left: 10upx;
		}
	}

	.con-shop,
	.con-shop-item {
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			padding-right: 10upx;
			color: #b5b5b5;
			font-size: 28upx;
		}

		.image-code {
			width: 42upx;
			height: 42upx;
			padding: 10upx 28upx 0upx 10upx;
		}
	}

	.con-shop-item {
		height: 120upx;
		padding: 60upx 30upx;
		margin-top: 18upx;
		margin-bottom: 20upx;
		border-radius: 20upx;
		padding: 20upx 30upx;
		box-shadow: 0 0 40upx #d6e7f1; // 左
		box-shadow: 0 0 40upx #d6e7f1; // 右
	}

	.con-shop-item-active {
		height: 120upx;
		padding: 60upx 30upx;
		margin-top: 18upx;
		margin-bottom: 20upx;
		border-radius: 20upx;
		padding: 20upx 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1.5px solid #1c76f1;

		view {
			color: #1c76f1;
		}
	}

	.num-box-active {
		font-weight: bold;
		font-size: 46upx;
		color: #1c76f1;
	}

	.num-box {
		font-weight: bold;
		font-size: 46upx;
		color: #000;
	}

	.bottom-box {
		width: 100%;
		// height: 200upx;
		background-color: #fff;
		margin-top: 18upx;
		border-radius: 20upx;
		padding: 20upx 30upx;
		box-shadow: 0 0 40upx #d6e7f1; // 左
		box-shadow: 0 0 40upx #d6e7f1; // 右
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;

		image {
			width: 34upx;
			height: 34upx;
			padding: 10upx 28upx 0upx 10upx;
		}

		.tab-num {
			background: #1c76f1;
			padding: 16upx 64upx;
			border-radius: 14upx;
			color: #fff;
			font-weight: 300;
			display: flex;
		}
	}

	::v-deep.u-calendar-month__days__day__select {
		border-radius: 50%;
	}

	.btn-box {
		width: 84%;
		margin-left: -4%;
		position: absolute;
		bottom: 80upx;
		background: #1a76f1;
		color: #fff;
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		border-radius: 20upx;
	}
</style>